<template>
  <!-- 多卡片 -->
  <div class="cust-card" @click="cardClick">
    <el-card shadow="always" class="card-item">
      <div v-if="cardList.img" class="card-item-bgi" :style="{background: `url(${cardList.img}) no-repeat`, backgroundSize: '100% 100%'}"></div>
      <div v-if="cardList.img2" class="card-item-icon" :style="{background: `url(${cardList.img2}) no-repeat`, backgroundSize: '100% 100%'}"></div>
      <div v-if="cardList.img3" class="card-item-icon icon2" :style="{background: `url(${cardList.img3}) no-repeat`, backgroundSize: '80% 80%'}"></div>
      <div class="card-item-text">
        <p class="text-line1">{{cardList.line1}}</p>
        <p v-if="cardList.line2" class="text-line2">{{cardList.line2}}</p>
        <p v-if="cardList.line3" class="text-line3">{{cardList.line3}}</p>
        <p v-if="cardList.line4" class="text-line4">{{cardList.line4}}</p>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "custCard",
  data() {
    return {
      cardList: {}
    }
  },
  props: {
    idx: {
      type: Number,
      default: () => null
    },
    cardData: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    cardData: {
      handler(n, o) {
        this.cardList = n;
      },
      deep: true
    }
  },
  mounted() {
    this.cardList = this.cardData;
  },
  methods: {
    cardClick() {
      this.$emit("cardClick", this.idx);
    }
  }
}
</script>

<style lang="scss" scoped>
  .cust-card {
    .card-item {
      width: 100%;
      height: 100px;
      cursor: pointer;
      &:hover {
        border: 1px solid rgba(17, 169, 131, 0.6);
      }
      ::v-deep .el-card__body {
        width: 100%;
        padding: 0;
        display: inline-flex;
        justify-content: flex-start;
        align-items: center;
      }
      .card-item-bgi {
        width: 100px;
        height: 100px;
        border-radius: 2px 0 0 2px;
      }
      .card-item-icon {
        width: 95px;
        height: 95px;
        margin: 0 10% 0 15%;
        &.icon2 {
          width: 60px;
          height: 60px;
          margin: 25px 10% 15px 15%;
        }
      }
      .card-item-text {
        margin-left: 16px;
        .text-line1 {
          font-size: 16px;
          margin: 10px 0 0;
        }
        .text-line2 {
          font-size: 14px;
          color: #999999;
        }
        .text-line3 {
          margin: 10px auto;
          color: #11A983;
          font-size: 24px;
          font-weight: 500;
          font-family: PingFangSC-Medium, PingFang SC !important;
        }
        .text-line4 {
          font-size: 14px;
          color: #333333;
        }
      }
    }
  }
</style>